<template>
    <SysDialog :title="dialog.title" v-model="dialog.visible" @on-close="onClose" @on-confirm="commit">
        <template v-slot:content>
            <lay-form style="width: 800px;height: 680px;" :model="addModel" :rules="rules" ref="addFormRef" required>
                <lay-form-item label="图书图片" prop="bookImg">
                    <UploadImage ref="listimagesRef" @get-img="getImg" :listimages="listimages"></UploadImage>
                </lay-form-item>
                <lay-form-item label="图书名称" prop="bookName">
                    <lay-input v-model="addModel.bookName"></lay-input>
                </lay-form-item>
                <lay-form-item label="作者姓名" prop="author">
                    <lay-input v-model="addModel.author"></lay-input>
                </lay-form-item>
                <lay-form-item label="出版社名" prop="publisher">
                    <lay-input v-model="addModel.publisher"></lay-input>
                </lay-form-item>
                <lay-form-item label="图书价格" prop="price">
                    <lay-input v-model="addModel.price"></lay-input>
                </lay-form-item>
                <lay-form-item label="出版时间" prop="publicationDate">
                    <lay-input v-model="addModel.publicationDate"></lay-input>
                </lay-form-item>
                <lay-form-item label="ISBN编码" prop="isbncode">
                    <lay-input v-model="addModel.isbncode"></lay-input>
                </lay-form-item>
            </lay-form>
        </template>
    </SysDialog>
</template>

<script setup lang="ts">
import SysDialog from '@/components/SysDialog.vue';
import useDialog from '@/hooks/useDialog';
import { layer } from '@layui/layui-vue'
import { nextTick, reactive, ref } from 'vue'
import { addBookApi, editBookApi } from '@/api/book/index.ts'
import UploadImage from '@/components/UploadImage.vue';
import { EditType, Title } from '@/type/BaseType';
import { BookParam } from '@/api/book/BookModel';
import { RuleType } from 'async-validator';
//表单ref属性
const addFormRef = ref()
const listimages = ref<{ imgsrc: string }[]>([])
const listimagesRef = ref([])
//弹框属性
const { dialog, onClose, onShow } = useDialog()
const addModel = reactive({
    id: '',
    bookImg: '',
    bookName: '',
    author: '',
    publisher: '',
    price: '',
    publicationDate: '',
    isbncode: '',
})
const rules = reactive({
    bookImg: [
        {
            type: 'string' as RuleType,
            required: true,
            message: '请上传图书图片',
            trigger: 'blur'
        }
    ],
    bookName: [
        {
            type: 'string' as RuleType,
            required: true,
            message: '请输入书籍名称',
            trigger: 'blur'
        }
    ],
    author: [
        {
            type: 'string' as RuleType,
            required: true,
            message: '请输入作者姓名',
            trigger: 'blur'
        }
    ],
    publisher: [
        {
            type: 'string' as RuleType,
            required: true,
            message: '请输入出版社名',
            trigger: 'blur'
        }
    ],
    price: [
        {
            type: 'string' as RuleType,
            required: true,
            message: '请输入图书价格',
            trigger: 'change'
        },
    ],
    publicationDate: [
        {
            type: 'date' as RuleType,
            required: true,
            message: '请输入出版时间',
            trigger: 'blur'
        }
    ],
    isbncode: [
        {
            type: 'string' as RuleType,
            required: true,
            message: '请输入ISBN编码',
            trigger: 'blur'
        },
    ]
});
//重置函数
const resetForm = () => {
    addModel.id = ''
    addModel.bookImg = ''
    addModel.bookName = ''
    addModel.author = ''
    addModel.publisher = ''
    addModel.price = ''
    addModel.publicationDate = ''
    addModel.isbncode = ''
    listimages.value = []
}
//新增和编辑的标识
const tags = ref('')
//显示弹框
const show = (type: string, row: BookParam) => {
    tags.value = type
    //设置标题弹框
    type == EditType.ADD ? dialog.title = Title.ADD : dialog.title = Title.EDIT
    onShow()
    //编辑回显
    if (EditType.EDIT == type && row) {
        // console.log(listimages.value)
        nextTick(() => {
            //设置编辑回显的数据
            Object.assign(addModel, row)
            addModel.price = String(addModel.price)
            if (addModel.bookImg) {
                let imgs = addModel.bookImg.split(",")
                for (let i = 0; i < imgs.length; i++) {
                    let img = { imgsrc: '' }
                    img.imgsrc = imgs[i]
                    listimages.value.push({ imgsrc: imgs[i] })
                }
            }
        })
    }
    //清空表单
    resetForm()
}
//暴露组件里的方法，给外部组件使用
defineExpose({
    show,
    listimages
})
const getImg = (file: any) => {
    // console.log(file)
    listimages.value = file
    let img = ''
    listimages.value.forEach((item, index) => {
        if (index === 0) {
            img += item['imgsrc']
        } else {
            img += "," + item['imgsrc']
        }
    })
    addModel.bookImg = img
}
//注册事件
const emits = defineEmits(['onFresh'])
//表单提交
const commit = () => {
    //验证表单
    addFormRef.value?.validate(async (valid: any) => {
        console.log(valid)
        console.log(addModel)
        if (valid) {
            let res = null
            if (tags.value == EditType.ADD) {
                res = await addBookApi(addModel)
            } else {
                res = await editBookApi(addModel)
            }
            if (res && res.code == 200) {
                layer.msg(res.message, {
                    icon: 1,
                    time: 1000,
                });
            } else {
                layer.msg(res.message, {
                    icon: 2,
                    time: 1000,
                });
            }
            //刷新
            emits('onFresh')
            onClose()
        }
    })
}
</script>

<style scoped></style>